<template>
    <div>
        <div class="swiper-wrap">
            <van-swipe :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in swiperList" :key="index">
                    <img @click="toAdDetail(item)" :src="item.imgUrl">
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="video-wrap">
            <div class="new-title">
                <span class="more" @click="getMore('new')">
                    < تېخىمۇ كۆپ</span> <span>ئەڭ يېڭىلىرى
                </span>
            </div>
            <waterfall :col="3" :data="newList">
                <template>
                    <VideoCover v-for="(item, index) in newList" :key="index" :info="item" />
                </template>
            </waterfall>
            <!-- <div class="videos">
            </div> -->
        </div>
        <div class="video-wrap">
            <div class="new-title">
                <span class="more" @click="getMore('hot')">
                    < تېخىمۇ كۆپ</span> <span>ئاۋات كىنولار
                </span>
            </div>
            <waterfall :col="3" :data="hotList">
                <template>
                    <VideoCover v-for="(item, index) in hotList" :key="index" :info="item" />
                </template>
            </waterfall>
        </div>
        <!-- <div class="video-wrap">
            <div class="new-title">
                <span>ئەڭ يېڭىلىرى</span>
            </div>
            <div class="videos">
            </div>
        </div> -->
    </div>
</template>

<script>
// @ is an alias to /src
import VideoCover from "@/components/VideoCover.vue";
import { shareFrend, shareMoments } from "@/utils";
import qs from "qs";
export default {
    name: "home",
    data() {
        return {
            newList: [],
            hotList: [],
            pageSize: 20,
            pageNum: 1,
            swiperList: []
        };
    },
    components: {
        VideoCover
    },
    mounted() {
        this.getVideo();
        this.getSwiper();
        shareFrend(this);
        shareMoments(this)
    },
    methods: {
        getVideo() {
            this.$http
                .post("/getVideo", { from: "home" })
                .then(res => {
                    this.hotList = res.hotList;
                    this.newList = res.newList;
                })
                .catch(err => { });
        },
        getMore(query) {
            this.$router.push({ path: '/videoList', query: {from:query} })
        },
        getSwiper() {
            try {
                this.$http.get('/getConfig?name=swiper').then(res => {
                    this.swiperList = JSON.parse(res);
                    console.log(this.swiperList);
                    
                })
            } catch (error) {
                
            }
        },
        toAdDetail(item) {
           window.open(item.adUrl,'_self')
        }
    }
};
</script>
<style lang="scss" scoped>
.swiper-wrap {
    margin: 0 auto;
    margin-top: 5px;
    overflow: hidden;
    // border-radius: 10px;
    // background-color: #0f1c16;
    background-color: #ffffff;
    padding: 0 1%;
    img {
        border-radius: 20px;
        height: 300px;
        overflow: hidden;
        width: 100%;
    }
    .van-swipe-item,
    .van-swipe__track {
        overflow: hidden;
        img {
            object-fit: cover;
        }
    }
}
.video-wrap {
    /deep/.vue-waterfall {
        width: unset;
        padding: 0 1vw;
    }
    // width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    &:first-child {
        border-radius: 20px 20px 0 0;
    }

    .new-title {
        padding: 5px 20px;
        color: #00a2ff;
        border-bottom: 1px solid #00a2ff;
        // background-color: #00a2ff;
        height: 50px;
        text-align: right;
        display: flex;
        justify-content: space-between;
        .more {
            color: #00a2ff;
            font-size: 25px;
        }
        span {
            font-size: 28px;
            display: inline-block;
            line-height: 60px;
            // margin-top: 4px;
        }
    }
    .videos {
        display: flex;
        justify-content: space-between;
        padding: 0 1%;
        flex-wrap: wrap;
        &::after {
            content: "";
            width: 32%;
            display: block;
            height: 0;
        }
    }
}
</style>

